<html>
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Lightbox Viewer</title>
  <link href="styles.css" rel="stylesheet">

</head>


<body>
<h1 class="title">Museum Gallery</h1>

<div class="gallery">
  <img alt="Stonehenge landscape with large stone structures."
       class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg">
  <img alt="A peaceful forest with tall green trees."
       class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg">
  <img alt="A dramatic stormy sky with dark clouds and lightning."
       class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg">
</div>
<div class="lightbox" id="lightbox">
  <button class="close-btn" id="close-btn">×</button>
  <img alt="Lightbox Image" id="lightbox-image" src="">
</div>
<script src="script.js"></script>
</body>
</html>